<template>
  <div class="app-container">
    <el-divider content-position="left">lazyLoad不带地址回显懒加载</el-divider>

    <el-cascader v-model="area" :props="props" class="w300" />{{
      area | areaStr(Pacc)
    }}{{ area }}
    <el-divider content-position="left"
      >本地数据优化DOM地址级联选择器</el-divider
    >
    <el-cascader
      v-model="areaList"
      :options="opctionList"
      @change="getarea"
      @expand-change="getarea"
      class="w300"
    />{{ areaList | areaStr(Pacc) }}{{ areaList }}
    <el-divider content-position="left">地址切换渲染</el-divider>
    <el-row :gutter="20">
      <el-col :span="6"
        ><el-tag
          v-for="(item, index) in areaObject"
          :key="index"
          effect="plain"
          @click="handeleArea(item)"
        >
          {{ item | areaStr(Pacc) }}
        </el-tag></el-col
      >
    </el-row>
    <el-cascader
      :key="keyId"
      v-model="cutoverArea"
      :options="cutoverList"
      @change="getareaChange"
      @expand-change="getareaChange"
      class="w300"
    />{{ cutoverArea | areaStr(Pacc) }}{{ cutoverArea }}

    <el-divider content-position="left">省市县地址</el-divider>
    <el-row :gutter="20">
      <el-col :span="6"
        ><el-tag
          v-for="(item, index) in areaObject1"
          :key="index"
          effect="plain"
          @click="handeleArea1(item)"
        >
          {{ item | areaStr(Pacc) }}
        </el-tag></el-col
      >
    </el-row>
    <el-cascader
      :key="keyId"
      v-model="cutoverArea1"
      :options="cutoverList1"
      @change="getareaChange1"
      @expand-change="getareaChange1"
      class="w300"
    />{{ cutoverArea1 | areaStr(Pacc) }}{{ cutoverArea1 }}
    <el-divider content-position="left">图片预览</el-divider>

    <el-image
      style="width: 100px; height: 100px"
      :src="url"
      :preview-src-list="srcList"
    >
    </el-image>
  </div>
</template>

<script>
const cityOptions = ["上海", "北京", "广州", "深圳"];
export default {
  name: "Area",
  filters: {
    // filters    里面使用不了this   只有直接传值过来
    areaStr(v, Pacc) {
      if (v.length == 4) {
        return v
          ? `${Pacc["86"][v[0]]}/${Pacc[v[0]][v[1]]}/${Pacc[v[1]][v[2]]}/${
              Pacc[v[2]][v[3]]
            }/四级`
          : "";
      } else if (v.length == 3) {
        return v
          ? `${Pacc["86"][v[0]]}/${Pacc[v[0]][v[1]]}/${Pacc[v[1]][v[2]]}/三级`
          : "";
      } else {
        return "";
      }
    },
  },
  data() {
    const _this = this;
    return {
      url:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      srcList: [
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        // "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        // "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      ],
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level, data } = node;
          const code = data ? data.value : null;
          setTimeout(() => {
            _this
              .dataArea(code, level + 1)
              .then((result) => {
                const nodes = result;
                const arr = [];
                for (const item in nodes) {
                  arr.push({
                    label: nodes[item],
                    value: item,
                    leaf: level >= 3,
                  });
                }
                // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                resolve(arr);
              })
              .catch((err) => {
                console.log("地址报错捕获", err);
              });
          }, 200);
        },
      },
      area: [],
      Pacc: {}, //本地地址数据
      // 优化DOM属性
      areaList: ["120000", "120100", "120101", "120101001"],
      opctionList: [],
      // 切换显示
      areaObject: [
        ["120000", "120100", "120101", "120101001"],
        ["460000", "460300", "460323", "460323451"],
        ["410000", "410200", "410203", "410203002"],
        ["360000", "360100", "360102", "360102004"],
      ],
      areaObject1: [
        ["120000", "120100", "120101"],
        ["460000", "460300", "460323"],
        ["410000", "410200", "410203"],
        ["360000", "360100", "360102"],
        ["360000", "360900", "360982"],
      ],
      cutoverArea: [],
      cutoverList: [],
      cutoverArea1: [],
      cutoverList1: [],
      keyId: 0,
      //   多选组件
      checkAll: false,
      checkedCities: ["上海", "北京"],
      cities: cityOptions,
      isIndeterminate: true,
    };
  },
  created() {
    this.Pacc = this.$pcaa;
  },
  mounted() {
    this.opctionList = this.getareaList(this.areaList);
    this.cutoverList = this.getareaList(this.cutoverArea);
  },
  methods: {
    handeleArea(v) {
      //地址数据切换问题     解决方法就是重新加载组件。两个方法一个加v-if,一个加key
      this.keyId++;
      this.cutoverArea = v;

      this.cutoverList = this.getareaList(v);
    },
    handeleArea1(v) {
      //地址数据切换问题     解决方法就是重新加载组件。两个方法一个加v-if,一个加key
      this.keyId++;
      this.cutoverArea1 = v;

      this.cutoverList1 = this.getareaList(v, 3);
    },
    getareaChange(v) {
      this.cutoverList = this.getareaList(v);
    },
    getareaChange1(v) {
      this.cutoverList1 = this.getareaList(v, 3);
    },
    // 优化Dom
    getarea(v) {
      this.opctionList = this.getareaList(v);
    },
    //  地址DOM优化   优化数据结构
    getareaList(area, series = 4) {
      let opctionList = [];
      // 获得到省份的数据
      for (const provincial in this.$pcaa["86"]) {
        opctionList.push({
          value: provincial,
          label: this.$pcaa["86"][provincial],
          children: [],
        });
      }
      let areaArr = opctionList; //利用内存引用
      area.forEach((item, index) => {
        if (series - 1 !== index) {
          let result = [];

          //遍历地址数据对象
          for (const code in this.$pcaa[item]) {
            //格式化子级
            let res = { value: code, label: this.$pcaa[item][code] };

            //当有子级时
            series - 2 !== index &&
              this.$pcaa[code] !== undefined &&
              (res.children = []);
            //给子集
            result.push(res);
          }
          if (!result.length) return;

          //找到子集
          for (const v of areaArr) {
            //如果CODE相等
            if (v.value === item) {
              //赋值给children
              v.children = result;
              areaArr = result;
              return;
            }
          }
        }
      });
      return opctionList;
    },
    // 异步方式地址数据
    dataArea(code = "86") {
      return new Promise((res, err) => {
        const codes = code || "86";
        res(this.$pcaa[codes]);
      });
    },
    // Map数据源
    PaccMap(d, index) {
      const arr = [];
      for (const item in d["86"]) {
        arr.push({
          label: d["86"][item],
          value: item,
          leaf: 1,
        });
      }
      arr.forEach((eitem) => {
        eitem.children = [];
        for (const evalue in d[eitem.value]) {
          eitem.children.push({
            label: d[eitem.value][evalue],
            value: evalue,
            leaf: 2,
          });
        }
        eitem.children.forEach((titem) => {
          titem.children = [];
          for (const tvalue in d[titem.value]) {
            titem.children.push({
              label: d[titem.value][tvalue],
              value: tvalue,
              leaf: 3,
            });
          }
          if (index === 3) return;
          titem.children.forEach((fitem) => {
            fitem.children = [];
            for (const fvalue in d[fitem.value]) {
              fitem.children.push({
                label: d[fitem.value][fvalue],
                value: fvalue,
                leaf: 4,
              });
            }
          });
        });
      });
      return arr;
    },
  },
  computed: {
    createRandomId() {
      return (
        (Math.random() * 10000000).toString(16).substr(0, 4) +
        "-" +
        new Date().getTime() +
        "-" +
        Math.random().toString().substr(2, 5)
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.w300 {
  width: 300px;
}
</style>
